import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Movie from '../views/Movie.vue'

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Home from '../views/Home.vue'
//import About from '../views/About.vue'
//import Detail from '../views/Detail.vue'	        已在component: ()=> import('../views/About.vue') 导入

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
    {
    path: '/home', 
    name:"Home",
    component: Home 
},
    {
    path: '/movie/:id', 
    name:"Movie",
    component: Movie 
},
    {
    path: '/music', 
    name:"Music",
    component: ()=> import('../views/Music.vue')
},
    { 
        path: '/about', 
        name:"About",
        //异步组件      推荐
        component: ()=> import('../views/About.vue') 
    }
,
    { 
        path: '/films', 
        name:"Films",
        //异步组件      推荐
        component: ()=> import('../views/Films/Films.vue'),
        children:[
            {
                path:"nowPlaying",
                component:()=>import("../views/Films/NowPlaying.vue")
            },
            {
                path:"comingSoon",
                component:()=>import("../views/Films/ComingSoon.vue")
            },
        ]
    }
,
    { 
        path: '/detail', 
        name: "Detail",
        component: ()=> import('../views/Detail.vue') 
    }
,
    { 
        path: '/', redirect:'/home'
    }
,
    { 
        path: '/*', name:'Error',
        component: ()=> import('../views/Error.vue') 
    }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes, // (缩写) 相当于 routes: routes
    mode:"history",
    // mode:"hash",//#
    base:process.env.BASE_URL,
})
export default router

